<template>
  <div class="vip-upgrade-page">
    <!-- 顶部横幅 -->
    <div class="vip-header">
      <div class="header-content">
        <div class="header-text">
          <div class="header-title">VIP·正式版</div>
          <div class="header-subtitle">尊享7大权益, 0.01元/30天</div>
        </div>
        <div class="header-graphic">
          <div class="graphic-v">V</div>
          <div class="graphic-heart">❤</div>
        </div>
      </div>
    </div>


    <!-- 会员选项 -->
    <div class="membership-options">
      <div 
        class="option-card" 
        :class="{ active: selectedPlan === '0.01' }"
        @click="selectedPlan = '0.01'"
      >
        <div class="option-title">30天卡</div>
        <div class="option-price">0.01元</div>
      </div>
<!--      <div -->
<!--        class="option-card" -->
<!--        :class="{ active: selectedPlan === '0.01' }"-->
<!--        @click="selectedPlan = '0.01'"-->
<!--      >-->
<!--        <div class="option-badge">优惠7.2折</div>-->
<!--        <div class="option-title">60天卡</div>-->
<!--        <div class="option-price">0.01元</div>-->
<!--      </div>-->
    </div>

    <!-- 专属特权对比 -->
    <div class="privileges-section">
      <div class="section-title">专属特权</div>
      <div class="comparison-table">
        <div class="table-header">
          <div class="header-cell">功能</div>
          <div class="header-cell">普通用户</div>
          <div class="header-cell">VIP</div>
        </div>
        <div class="table-row" v-for="feature in features" :key="feature.name">
          <div class="row-cell">{{ feature.name }}</div>
          <div class="row-cell">
            <span v-if="feature.regular === 'X'">✗</span>
            <span v-else>{{ feature.regular }}</span>
          </div>
          <div class="row-cell vip-cell">
            <span v-if="feature.vip === '✓'">✓</span>
            <span v-else>{{ feature.vip }}</span>
          </div>
        </div>
      </div>
      <div class="view-more" @click="showMoreFeatures = !showMoreFeatures">
        查看更多{{ showMoreFeatures ? '∧' : '∨' }}
      </div>
    </div>

    <!-- 尊享权益 -->
    <div class="benefits-section">
      <div class="section-header">
        <div class="section-title-bar">
          <span class="title-bar">|</span>
          <span class="section-title-text">尊享权益</span>
        </div>
        <div class="view-details">查看详情:</div>
      </div>
      <div class="benefits-grid">
        <div class="benefit-item" v-for="benefit in benefits" :key="benefit.name">
          <div class="benefit-icon-wrapper">
            <div class="benefit-icon">{{ benefit.icon }}</div>
          </div>
          <div class="benefit-name">{{ benefit.name }}</div>
        </div>
      </div>
    </div>

    <!-- 会员之声 -->
    <div class="testimonials-section">
      <div class="section-header">
        <div class="section-title-bar">
          <span class="title-bar">|</span>
          <span class="section-title-text">会员之声</span>
        </div>
        <div class="view-details">查看更多:</div>
      </div>
      <div class="testimonials-scroll">
        <div class="testimonial-item" v-for="testimonial in testimonials" :key="testimonial.id">
          <img :src="testimonial.avatar" :alt="testimonial.name" class="testimonial-avatar" />
          <div class="testimonial-info">
            <div class="testimonial-name">{{ testimonial.name }}</div>
            <div class="testimonial-age">{{ testimonial.age }}岁</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部购买按钮 -->
    <div class="purchase-bar">
      <div class="price-display">
        {{ selectedPlan === '0.01' ? '0.01元/30天' : '0.01元/30天' }}
      </div>
      <div class="purchase-btn" @click="handlePurchase">立即购买</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const selectedPlan = ref('0.01')
const showMoreFeatures = ref(false)

const features = [
  { name: '竞争力分析', regular: '5元/天', vip: '不限次数' },
  { name: '专属简历模板', regular: 'X', vip: '✓' },
  { name: '16型职业性格测试', regular: 'X', vip: '完整版1次' },
  { name: '五维性格测评', regular: 'X', vip: '赠送1次' },
  { name: '消息精准过滤', regular: 'X', vip: '✓' }
]

const benefits = [
  { name: '竞争力分析', icon: '📊', desc: '了解你的竞争力水平' },
  { name: '专属简历模板', icon: '📄', desc: '精美简历模板任选' },
  { name: '职业性格测评', icon: '🧠', desc: '深度了解职业性格' },
  { name: '消息精准过滤', icon: '🔍', desc: '智能过滤重要消息' },
  { name: '专属数据报告', icon: '📈', desc: '个性化数据分析' },
  { name: '尊贵身份标识', icon: '👑', desc: 'VIP专属标识' }
]

const testimonials = [
  { id: 1, name: '张女士', age: 23, avatar: 'https://avatars.githubusercontent.com/u/1?v=4' },
  { id: 2, name: '王女士', age: 28, avatar: 'https://avatars.githubusercontent.com/u/2?v=4' },
  { id: 3, name: '李女士', age: 25, avatar: 'https://avatars.githubusercontent.com/u/3?v=4' }
]

function handlePurchase() {
  // 生成订单ID（实际应该调用后端接口创建订单）
  const orderId = `VIP_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
  const amount = 0.01 // 固定价格0.01元
  
  // 跳转到微信支付页面，传递订单ID和金额
  router.push({
    path: '/vip-pay',
    query: {
      orderId: orderId,
      amount: amount
    }
  })
}
</script>

<style scoped>
.vip-upgrade-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 80px;
}

/* 顶部横幅 */
.vip-header {
  background: linear-gradient(135deg, #00c293 0%, #008B6B 100%);
  border-radius: 0 0 20px 20px;
  padding: 40px 20px;
  color: #fff;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  flex: 1;
}

.header-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.header-graphic {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graphic-v {
  font-size: 48px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
}

.graphic-heart {
  font-size: 32px;
  color: #FF6B35;
}

/* 节省提示 */
.savings-bar {
  max-width: 1200px;
  margin: 20px auto;
  padding: 12px 20px;
  background: #FFF4E6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.savings-icon {
  width: 24px;
  height: 24px;
  background: #FF6B35;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.savings-text {
  flex: 1;
  color: #664D3C;
  font-size: 14px;
}

/* 会员选项 */
.membership-options {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
}

.option-card {
  flex: 1;
  background: #fff;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.option-card.active {
  border-color: #FF6B35;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.option-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: #FF6B35;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.option-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
}

.option-price {
  font-size: 32px;
  font-weight: 700;
  color: #FF6B35;
}

.option-card:not(.active) .option-price {
  color: #333;
}

/* 专属特权 */
.privileges-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.comparison-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
  padding: 16px 20px;
}

.table-header {
  background: #F5F5F5;
  font-weight: 600;
  color: #333;
}

.table-row {
  border-top: 1px solid #F0F0F0;
}

.row-cell {
  color: #666;
}

.vip-cell {
  color: #FF6B35;
  font-weight: 600;
}

.view-more {
  text-align: center;
  color: #FF6B35;
  cursor: pointer;
  font-size: 14px;
  padding: 8px;
}

/* 尊享权益 */
.benefits-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-bar {
  color: #FF6B35;
  font-size: 24px;
  font-weight: 700;
}

.section-title-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.view-details {
  font-size: 14px;
  color: #666;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-item {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: transform 0.3s;
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.benefit-icon-wrapper {
  width: 64px;
  height: 64px;
  background: #FFF4E6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.benefit-icon {
  font-size: 32px;
}

.benefit-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 会员之声 */
.testimonials-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.testimonials-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
}

.testimonial-item {
  min-width: 120px;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}

.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.testimonial-age {
  font-size: 12px;
  color: #666;
}

/* 底部购买按钮 */
.purchase-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.price-display {
  flex: 1;
  background: #00c293;
  color: #fff;
  padding: 20px;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-btn {
  flex: 1;
  background: #FF6B35;
  color: #fff;
  padding: 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
}

.purchase-btn:hover {
  background: #FF5722;
}

@media (max-width: 768px) {
  .membership-options {
    flex-direction: column;
  }
  
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

